<template>
   <div class="yw-order-container yw-order-detail position-r">
      <van-nav-bar title="订单详情" left-text="" left-arrow class="icon-return" @click-left="$router.push({name:'order'})">
        <van-icon name="search" slot="right" @click="clickfilterEevent()"/>
      </van-nav-bar>
      <!-- 我下的单的订单详情状态 -->
      <div class="statue" v-if="orderObj.status==2&&type==1"><span class="font-4 font-w5">已支付</span><p>等待接单(剩余{{countDown}})</p></div>
      <div class="statue" v-if="orderObj.status==3&&type==1"><span class="font-4 font-w5">已接单</span><!-- <p>还差{{countDown}}开始服务</p> --></div>
      <div class="statue" v-if="orderObj.status==1&&type==1"><span class="font-4 font-w5">待支付</span><p>等待支付 剩余{{countDown}}</p></div>
      <div class="statue" v-if="orderObj.status==4&&type==1&&orderObj.complains&&orderObj.complains.length>0"><span class="font-4 font-w5">进行中</span>
        <p v-if="orderObj.complains[0].status==1">投诉中</p>
        <p v-if="orderObj.complains[0].status==2">投诉已处理</p>
        <p v-if="orderObj.complains[0].status==5">投诉失败</p>
        <p v-if="orderObj.complains[0].status==3">已受理</p>
        <p v-if="orderObj.complains[0].status==4">投诉成功</p>
      </div>
      <div class="statue" v-if="orderObj.status==4&&type==1"><span class="font-4 font-w5">进行中</span></div>
      <div class="statue" v-if="orderObj.status==10&&orderObj.complains==''&&type==1"><span class="font-4 font-w5">已完成</span></div>
      <div class="statue" v-if="orderObj.status==10&&orderObj.complains!=''&&type==1"><span class="font-4 font-w5">已完成</span>
        <p v-if="orderObj.complains[0].status==1">投诉中</p>
        <p v-if="orderObj.complains[0].status==2">投诉已处理</p>
        <p v-if="orderObj.complains[0].status==5">投诉失败</p>
        <p v-if="orderObj.complains[0].status==4">投诉成功</p>
      </div>
      <!-- <div class="statue" v-if="orderObj.status==102&&orderObj.payinfos[0].status==2&&type==1"><span class="font-4 font-w5">已取消</span><p>退款中</p></div> -->
      <div class="statue" v-if="orderObj.status==102&&orderObj.payinfos&&orderObj.payinfos[0].status==3&&type==1"><span class="font-4 font-w5">已取消</span><p>退款成功</p></div>
      <div class="statue" v-if="orderObj.status==102&&orderObj.payinfos&&orderObj.payinfos[0].status!=3&&type==1"><span class="font-4 font-w5">已取消</span></div>
      <!-- <div class="statue" v-if="orderObj.status==102&&orderObj.payinfos[0].status==1&&type==1"><span class="font-4 font-w5">已取消</span></div> -->
      <div class="statue" v-if="orderObj.status==101&&type==1"><span class="font-4 font-w5">已取消</span></div>
      <!-- 我接的单的订单详情状态 -->
      <div class="statue" v-if="(orderObj.status==102&&type==2)||(orderObj.status==101&&type==2)"><span class="font-4 font-w5">已取消</span><p>错过了接单时间</p></div>
      <div class="statue" v-if="orderObj.status==2&&type==2"><span class="font-4 font-w5">待接单</span><p>(剩余{{countDown}})</p></div>
      <div class="statue" v-if="orderObj.status==4&&type==2">
        <span class="font-4 font-w5">进行中</span>
        <p v-if="orderObj.complains[0].status==1">投诉中</p>
        <p v-if="orderObj.complains[0].status==2">投诉已处理</p>
      </div>
      <div class="statue" v-if="orderObj.status==3&&type==2"><span class="font-4 font-w5">已接单</span></div>
      <div class="statue" v-if="orderObj.status==10&&type==2&&orderObj.complains==''"><span class="font-4 font-w5">已完成</span></div>
      <div class="statue" v-if="orderObj.status==10&&type==2&&orderObj.complains!=''">
          <span class="font-4 font-w5">已完成</span>
          <p v-if="orderObj.complains[0].status==1">投诉中</p>
          <p v-if="orderObj.complains[0].status==2">投诉已处理</p>
      </div>
      <!-- z -->
      <div class="opacity">
        <div class="in clearfix" @click="listentoPersonalEvent()" v-if="type==1&&orderObj.goods&&orderObj.goods.length>0">
          <img class="img-radius" :src="$imgPath(orderObj.seller ? orderObj.seller.headImg : '')" />
          <p>
            <span class="color-3 font-3"><span v-for="(val,index) in orderObj.goods" :key="index"><em v-if="val.type==1">{{val.goodsName}}</em></span><em class="label0 label-3">{{goodsType.level}}</em></span>
            <span class="color-6 font-3">
              <span>{{orderObj.seller ? orderObj.seller.nickname : ''}}</span>
              <em class="sex1" v-if="orderObj.seller ? orderObj.seller.sex==1 : ''">{{orderObj.seller ? orderObj.seller.age : ''}}</em>
              <em class="sex2" v-if="orderObj.seller ? orderObj.seller.sex==2 : ''">{{orderObj.seller ? orderObj.seller.age : ''}}</em>
            </span>
          </p>
        </div>
        <div class="in clearfix" @click="listentoPersonalEvent()" v-if="type==2&&orderObj.goods&&orderObj.goods.length>0">
          <img class="img-radius" :src="$imgPath(orderObj.buyer ? orderObj.buyer.headImg : '')" />
          <p>
            <span class="color-3 font-3">
              <span v-for="(val,index) in orderObj.goods" :key="index"><em v-if="val.type==1">{{val.goodsName}}</em></span><em class="level">{{goodsType.level}}</em>
            </span>         
            <span class="color-6 font-3"><span>{{orderObj.seller ? orderObj.buyer.nickname : ''}}</span>
              <em class="sex1" v-if="orderObj.buyer ? orderObj.buyer.sex==1 : ''">{{orderObj.buyer ? orderObj.buyer.age : ''}}</em>
              <em class="sex2" v-if="orderObj.buyer ? orderObj.buyer.sex==2 : ''">{{orderObj.buyer ? orderObj.buyer.age : ''}}</em>
            </span>
          </p>
        </div>
      </div>
      <!-- content -->
      <div class="content">
        <!-- 我下的单 -->
        <div class="step1" id="step1" v-if="type==1">
          <p><span class="color-9">服务时间</span><span class="fr color-3" v-if="orderObj.goods&&orderObj.goods.length>0">{{$str($time(orderObj.useStartTime),0,16)}}~{{$str($time(orderObj.useEndTime),0,16)}}（{{orderObj.goods[0].count}}小时）</span></p>
          <p id="margin-t"><span class="color-9">订单金额</span><span class="fr color-3">{{orderObj.orderAmount}}钻石</span></p>
          <p><span class="color-9">优惠减免</span><span class="fr color-3">-{{orderObj.orderAmount-orderObj.payAmount}}钻石</span></p>
          <p v-if="orderObj.status==102&&orderObj.payinfos&&orderObj.payinfos[0].status==3&&orderObj.payAmount"><span class="color-9">退款金额</span><span class="fr color-3">-&yen;{{orderObj.payAmount}}</span></p>
          <p v-if="orderObj.refundAmount>0"><span class="color-9">退款金额</span><span class="fr color-3">-&yen;{{orderObj.refundAmount}}</span></p>
          <p v-if="orderObj.status==102&&orderObj.payinfos&&orderObj.payinfos[0].status==3&&orderObj.payAmount"><span class="color-9">实付款</span><span class="fr color-default font-3">&yen;0</span></p>
          <p v-else><span class="color-9">实付款</span><span class="fr color-default font-3">{{orderObj.payAmount-orderObj.refundAmount}}钻石</span></p>
        </div>
        <!-- 我接的单 -->
        <div class="step1" id="step1" v-if="type==2">
          <p><span class="color-9">服务时间</span><span class="fr color-3" v-if="orderObj.goods&&orderObj.goods.length>0">{{$str($time(orderObj.useStartTime),0,16)}}~{{$str($time(orderObj.useEndTime),0,16)}}（{{orderObj.goods[0].count}}小时）</span></p>
          <p><span class="color-9">订单金额</span><span class="fr color-3">&yen;{{orderObj.orderAmount}}</span></p>
          <p><span class="color-9">平台服务费</span>
            <span class="fr color-3" v-if="orderObj.status==102">-&yen;0</span>
            <span class="fr color-3" v-else>-&yen;{{orderObj.systemCost}}</span>
          </p>
          <p v-if="orderObj.refundAmount>0"><span class="color-9">退款金额</span><span class="fr color-3">-&yen;{{orderObj.refundAmount}}</span></p>
          <p><span class="color-9">实际收入</span>
            <span class="fr color-default font-3" v-if="orderObj.status==102">&yen;0</span>
            <span class="fr color-default font-3" v-else>&yen;{{orderObj.actualIncome}}</span>
          </p>
        </div>
        <!-- 我下的单：已接单 && 已支付 && 已完成 显示 -->
        <div class="step2" v-if="(orderObj.status==102&&type==1&&type==1)||(orderObj.status==2&&type==1)||(orderObj.status==3&&type==1)||(orderObj.status==4&&type==1)||(orderObj.status==10&&type==1)">
          <p class="bb0">
            <span class="color-9">订单编号</span>
            <span class="color-6">{{orderObj.id}}</span>
            <em class="fr label0 label-3" v-clipboard:copy="orderId" v-clipboard:success = "onCopy">复制</em>
          </p>
          <div v-if="orderObj.payinfos&&orderObj.payinfos.length>0" v-for="(val,index) in orderObj.payinfos" :key="index">
            <p>
              <span class="color-9">支付方式</span>
              <span class="color-6" v-if="val.type==100">余额支付</span>
              <span class="color-6" v-if="val.type==1">微信公众号</span>
              <span class="color-6" v-if="val.type==2">微信H5</span>
              <span class="color-6" v-if="val.type==3">微信APP</span>
              <span class="color-6" v-if="val.type==10">支付宝H5</span>
              <span class="color-6" v-if="val.type==11">支付宝PC</span>
              <span class="color-6" v-if="val.type==12">支付宝APP</span>
            </p>
            <p>
              <span class="color-9">支付时间</span><span class="color-6">{{$time(val.payTime)}}</span>
            </p>
          </div>
           <!-- 已接单，进行中，已完成状态:可显示 -->
          <p v-if="(orderObj.status==3&&orderObj.complains.length==0)||(orderObj.status==4&&orderObj.complains.length==0)||(orderObj.status==10&&orderObj.complains.length==0)" @click="listentoSuggestion()"><span class="color-6">我要投诉</span><span class="fr in"></span></p>
          <!--  已接单状态:可显示 end// -->
        </div>
        <!-- 我接的单：已接单 && 已支付 && 已完成 显示 -->
        <div class="step2" v-if="orderObj.status!=1&&type==2">
          <p class="bb0">
            <span class="color-9">订单编号</span>
            <span class="color-6">{{orderObj.id}}</span>
            <em class="fr label0 label-3" v-clipboard:copy="orderId" v-clipboard:success = "onCopy">复制</em>
          </p>          
          <!--  已接单状态:可显示 end// -->
        </div>
        <!-- 已接单 && 已支付 && 已完成 end// -->
        <!-- 已支付状态  (灰色QQ头像)-->
        <div class="step3" v-if="orderObj.status!=3&&orderObj.status!=4">
          <p class="bb0 clearfix" id="padding-tb1">
            <span class="color-6 border-r" @click="chatLink(type)">对话</span>
            <span class="color-c">QQ</span>
          </p>
        </div>
        <!-- 评价 -->
        <div class="step7" v-if="orderObj.status==10&&orderObj.comment==1">
          <p>
            <van-row class="title">
                <van-col span="6" class="color-6 font-3" v-if="type==1">我的评价</van-col>
                <van-col span="6" class="color-6 font-3" v-if="type==2">给我的评价</van-col>
                <van-col span="18" class="text-align-r" v-if="orderObj.comments.length>0">
                    <van-rate v-model="orderObj.comments[0].rank" :size="16" :count="5" color="#D84F4D" disabled disabled-color="#D84F4D"/>
                </van-col>
            </van-row>
          </p>
          <div class="desc" v-if="orderObj.comments.length>0">
            <p class="color-9 bb0 pb0 word-break">{{orderObj.comments[0].content}}</p>
            <p class="sign color-9 font-tags">
              <span class="margin-l" v-if="orderObj.comments[0].tags.length>0">
                <em class="tags-margin" v-for="(val,index) in orderObj.comments[0].tags" :key="index">{{val.name}}</em>
              </span>              
            </p>
          </div>
        </div> 
        <!-- 评价 end// -->      
        <!-- <div class="step4 clearfix" v-if="orderObj.status==1&&type==1">
          <p class="bb0">
            <span class="fr label0 label-3" @click="quXiaoOrder()">取消订单</span>            
          </p>
        </div> -->
        <div class="step4 clearfix" v-if="(orderObj.status==10&&orderObj.comment==1)||(orderObj.status==102&&orderObj.payinfos&&orderObj.payinfos.length>0&&orderObj.payinfos[0].status==3)||(orderObj.status==101&&type==1)">
          <p class="bb0">           
            <span class="fr label0 label-3 margin-t" @click="dropOrder()">删除订单</span>          
          </p>
        </div>
        <div class="step4 clearfix" v-if="orderObj.status==10&&orderObj.comment==0&&type==1">
          <p class="bb0">          
            <span class="fr label0 label-3" @click="comment()">给TA评价</span>
          </p>
        </div>
        <!-- 已支付状态 end// -->
        <!-- 已接单 && 已进行状态 (蓝色QQ头像)-->
        <div class="step5 mb0" v-if="orderObj.status==3||orderObj.status==4">
          <p class="color-6 clearfix" id="padding-tb2">
            <span class=" border-r" @click="chatLink(type)">对话</span>
            <span @click="show=true">QQ</span>
          </p>
          <div class="bj-color"></div>
        </div>
        <div class="step6" id="step6" v-if="orderObj.status==1&&orderObj.payinfos.length>0&&orderObj.payinfos[0].status==1&&type==1"><!-- 待支付 -->
          <p class="bb0 pb0 color-3">请选择支付方式</p>          
          <van-radio-group v-model="radio">
              <van-cell-group>
                  <van-cell clickable @click="radio = '1'">
                      <span>支付宝支付</span>
                      <van-radio name="1" />
                  </van-cell>
                  <van-cell clickable @click="radio = '2'">
                      <span>微信支付</span>
                      <van-radio name="2" />
                  </van-cell>                 
                  <van-cell clickable @click="yuESelect = !yuESelect">
                      <i class="quan" :class="[yuESelect ? 'yuESelect' : '']"></i>
                      <span>余额支付<em class="color-9 font-2">（余额：￥{{yuE}}）</em></span>
                  </van-cell>
              </van-cell-group>
          </van-radio-group>                 
          <p class="optbtn clearfix">
            <span class="fl label0 label-3" @click="quXiaoOrder()">取消订单</span>
            <span class="fr btn-f00 btn-success" @click="orderBuy()">确认支付{{orderObj.payAmount}}元</span>
          </p>
        </div>
        <!-- end// -->           
      </div>
      <van-tabbar v-if="orderObj.status==2&&type==2">
            <span class="fabu-dynamic text-align-c" @click="jieDan(orderId)">接单</span>            
        </van-tabbar>
      <!-- content end// -->
      <!-- 弹框pop -->
      <van-popup v-model="artShow" class="yw-popup">
          <detail-content v-on:listentoChildEvent="closePopup" :orderId="orderId" :goodsId="goodsId"></detail-content>
      </van-popup>
      <!-- end// -->
      <van-popup v-model="show" id="van-dialog">
          <h3>提示</h3>
          <p>
             <img src='../../assets/image/iocn_qq.png'/>
             <span>{{QQ}}</span>
             <em v-clipboard:copy='QQ' v-clipboard:success='onCopyQQ'>复制</em>
          </p>         
          <p>请及时与TA联系</p>
          <p @click="show=false">我知道了</p>
      </van-popup>
   </div>
</template>
<script>
  import store from '../../store'
  import apiHttp from '../../api/index'
  import { Toast , Rate, Popup,Tab, Tabs,Row, Col, RadioGroup, Radio} from 'vant';
  import contentChild from '@/components/orderChild/articlePop'
  export default {
  data() {
    return {
      artShow: false,//评价弹框
      active: 2,
      filter: false,
      radio: '3',  //支付方式：默认余额
      orderId:this.$route.params.orderId,   //订单id
      type:this.$route.query.type,   //订单类型（1.我下的单 2.我接的单）
      orderObj:{},    //我的订单详情 
      goodsId:"",
      userId:"",
      QQ:"",
      message:"",
      goodsType:{},   //服务信息（例如：段位等级）
      countDown:"",
      yuE:0,
      timeCha:'',
      clearTime:'',
      yuESelect:true,
      orderPrice:'',
      show:false
    }
  },
  components:{
    'detail-content': contentChild
  },
  created(){
    this.getOrderDetail();
    this.getYue();
  },
  methods: {
    // 点击对话跳转
    chatLink(type){
        if(type==1){//我下的单
            this.$router.push({
                name:'chat',
                query:{
                    to_code:this.orderObj.seller.code,
                    to_username:this.orderObj.seller.nickname,
                    to_userId:this.orderObj.seller.id,
                    to_headImg:this.orderObj.seller.headImg
                }
            });
        }else if(type==2){//我接的单
            this.$router.push({
                name:'chat',
                query:{
                    to_code:this.orderObj.buyer.code,
                    to_username:this.orderObj.buyer.nickname,
                    to_userId:this.orderObj.buyer.id,
                    to_headImg:this.orderObj.buyer.headImg
                }
            });
        }

    },

    onCopy(e){
      Toast('复制成功')
    },
    onCopyQQ(e){
      Toast('复制成功'+e.text)
    },
    //根据订单id查询订单详情
    getOrderDetail(){      
        let params = {
            orderId:this.orderId
        } 
        apiHttp.orderIndex.orderDetail(this.orderId,params,resp=>{
            if(resp.code==200){ 
                if(resp.data.buyer.headImg==null || resp.data.buyer.headImg==''){
                  resp.data.buyer.headImg = '/user/head/defaultHeadImage.png';
                }
                if(resp.data.seller.headImg==null || resp.data.seller.headImg==''){
                  resp.data.seller.headImg = '/user/head/defaultHeadImage.png';
                }
                if(resp.data.status==1){
                  this.timeCha = Number(resp.data.createTime) + 600000 - Number(resp.message)
                } 
                if(resp.data.status==2&&resp.data.payinfos.length>0){
                  this.timeCha = Number(resp.data.payinfos[0].payTime) + 600000 - Number(resp.message)
                }
                if(resp.data.status==3&&resp.data.payinfos.length>0){
                  this.timeCha = Number(resp.data.payinfos[0].payTime) + 600000 - Number(resp.message)
                }
                this.orderPrice = resp.data.payAmount;
                this.orderObj = resp.data;               
                if(this.orderObj.goods.length>0){
                    this.goodsType = this.$getJson(this.orderObj.goods[0].goodsType); 
                }                       
                if(this.type==1){
                  this.userId = this.orderObj.seller.id;
                  this.QQ = this.orderObj.seller.qq;             
                }
                if(this.type==2){
                  this.userId = this.orderObj.buyer.id;
                  this.QQ = this.orderObj.buyer.qq; 
                  //系统取消并退款
                  /* if(this.orderObj.status==102 && this.orderObj.payinfos[0].status==2){
                    
                  }  */                                                  
                }           
                if(this.orderObj.comment==0&&this.orderObj.status==10&&this.type==1&&this.orderObj.goods.length>0){                   
                    this.goodsId = this.orderObj.goods[0].goodsId;
                    this.artShow = true;
                } 
                if(this.timeCha > 0){
                  this.djs() 
                }    
            }else{
                Toast(resp.message);
            }                                                                                 
        })
    },
    djs(){
      let self = this
      this.timeCha = this.timeCha - 1000
      this.$store.commit('set_remainTime', this.timeCha)
      this.countDown = this.$countDown(this.timeCha - 1000)
      if(this.countDown=='0分0秒'){
          setInterval(()=>{
            if(this.orderObj.status==1||this.orderObj.status==2){
               self.getOrderDetail()
              return
            }else{               
                 return
            }
          },5000)                  
      }else{
        setTimeout(()=>{
          self.djs()
        },1000)  
      }   
    },
    //查询会员账户余额
    getYue(){
      apiHttp.apiCenter.getUserWalletDetail('',resp=>{       
          if(resp.code==200){
              this.yuE = resp.data.recharge;
          }
      })
    },
    //跳转个人中心
    listentoPersonalEvent() {
      if(this.type==1){
          this.userId = this.orderObj.seller.id;
      }
      if(this.type==2){
         this.userId = this.orderObj.buyer.id;
      }
      this.$router.push({
          name:'center' ,
          query:{userId:this.userId}        
      });    
    },
    //弹出评价页面
    comment(){
      if(this.orderObj.goods.length>0){
        this.goodsId = this.orderObj.goods[0].goodsId;
      }        
        this.orderId = this.orderObj.id;      
        this.artShow = true;
    },
    //订单详情状态为待接单时点击（接单）触发的事件（弹框提示）
    jieDan(orderId){
        this.$dialog.confirm({
            title:'提示',
            message: "亲爱的陪玩师，接单后请及时联系用户哦！"
        }).then(() => { 
          //调用陪玩接单方法                  
          this.accept(orderId); 
        }).catch(() => {
            // on cancel
        })
    },
    //陪玩接单调用接口
    accept(orderId){                          
        apiHttp.orderIndex.acceptOrder(orderId,'',resp=>{
          if(resp.code==200){
             Toast("接单成功！");
             this.getOrderDetail();
          }else{
            Toast(resp.message);
          }                                                       
        })
    },
    //关闭弹框
    closePopup() {
      this.artShow = false
    },
    clickfilterEevent() {     
      this.filter = true
    },
    //跳转投诉页
    listentoSuggestion() {
      this.$router.push({
          name:'suggestion',
          params:{orderId:this.orderId}
      });
    },
    //点击QQ头像
    remindQQ(){
        this.$dialog.alert({
            confirmButtonText:"我知道了",
            title:'提示',            
            message: this.message
        }).then(() => { 

        })
    },
    //取消订单
    quXiaoOrder(){
        this.$dialog.confirm({
            title:'是否确认取消订单',
            message:"这么轻易的要放弃？订单超时未支付，会被取消哦~~",
            confirmButtonText:"确认取消",
            cancelButtonText:"继续支付"
        }).then(() => {  
          //调用取消订单方法   
          this.quxiaoor(); 
        }).catch(() => {
            // on cancel
        })
    },
    //调用取消订单接口   
    quxiaoor(){        
        let params = {
            orderId:this.orderId
        }            
        apiHttp.orderIndex.cancelOrder(this.orderId,params,resp=>{                           
            if(resp.code==200){
              Toast("订单取消成功！");
              this.getOrderDetail();
            }else{
              Toast(resp.message);
            }                                             
        })
    },
    //删除订单
    dropOrder(){
        this.$dialog.confirm({
            title:'提示',
            message:"您好，订单删除后，订单不可恢复，确认删除么？"
        }).then(() => {  
          //调用删除订单方法   
          this.deleteor(); 
        }).catch(() => {
            // on cancel
        })
    },
    //调用订单删除接口   
    deleteor(){      
        let params = {
            orderId:this.orderId            
        }            
        apiHttp.orderIndex.deleteOrder(this.orderId,params,resp=>{ 
          if(resp.code==200){
              Toast("订单删除成功！");
              this.$router.push({
                name:"order"
              });
            }else{
              Toast(resp.message);
            }                          
                                                        
        })
    },
    //订单支付
    orderBuy(){
      let payType = ''
      if(this.$isiOS){
          if(this.$store.state.iosTrue == true){
              if(this.radio == 1){
                  payType = 12
              }else if(this.radio == 2){
                    payType = 3
              }
          }else{
              if(this.radio == 1){
                  payType = 10
              }else if(this.radio == 2){
                  payType = 2
              }
          }
      }else if(this.$isAndroid){
          if(this.radio == 1){
              payType = 10
          }else if(this.radio == 2){
              payType = 2
          }else {
              payType = ''
          }
      }
        let params={
              orderId:this.orderId,
              payType:payType,
              autoCost:this.yuESelect
        }
        apiHttp.detailHttp.payforOrderafter(params,resp=>{
            if(resp.code == '200'){
                // Toast('支付'+resp.message)
                if(payType == 10){
                  this.formZFB = resp.data
                  const div = document.createElement('div')
                        div.innerHTML = this.formZFB 
                        document.body.appendChild(div)
                        document.forms[0].submit()
                }else if(payType == 12){
                  window.webkit.messageHandlers.alipay.postMessage(resp.data)
                }else if(payType == 2){
                  location.href = resp.data
                }else{
                  this.$router.push({
                      name:'order',
                  });
                }
            }else{
                Toast(resp.message)
            }
        });
    }
    
  },
  watch:{              
        radio(newVal,oldVal){
            this.radio = newVal
            if(this.orderPrice < this.yuE){
                this.yuESelect = true;                             
            }          
        }
    }
};
</script>
<style scoped>
#van-dialog{
  width: 70%;
  border-radius: 0.6rem;
  padding-bottom: 0.6rem;
  text-align: center;
}
#van-dialog h3{
  font-size: 0.68rem;
}
#van-dialog img{
  width:1.8rem;
  position: relative;
  top: 0.14rem;
}
#van-dialog p:nth-child(3){
  font-size: 0.5rem;
  margin-bottom: 1rem;
}
#van-dialog span{
  font-size: 0.6rem;
  position: relative;
  bottom: 0.52rem;
  margin-right: 0.4rem;
}
#van-dialog em{
  font-size: 0.6rem;
  border: 0.04rem solid #D84E4D;
  padding: 0.1rem 0.5rem 0.04rem 0.5rem;
  border-radius: 0.6rem;
  color: #D84E4D;
  position: relative;
  bottom: 0.52rem;
}
#van-dialog p:nth-child(4){
  font-size: 0.68rem;
  color: #D84F4D;
}
.qq{
  width: 1.6rem;
}
.fuzhi{
		border: 0.04rem solid #D84E4D;
		padding: 0.1rem 0.6rem 0.06rem 0.6rem;
		border-radius: 0.4rem;
		color: #D84E4D;
    margin-left: 1rem;
	}
.level{
    padding: 0.1rem 0.4rem;
    background: #fff;
    border-radius: 1rem;
    border: 0.04rem solid rgb(233, 231, 231);
    color: #666;
    font-size: 0.46rem;
    margin-right: .3rem;
}
/* 订单支付 */
.quan{
    width: .6rem;
    height: .6rem;
    display: block;
    float: left;
    border:solid 1px #eee;
    border-radius: 50%;
    margin-right: .5rem;
    margin-top: .2rem;
}
.yuESelect{
    background-color: #D84F4D;
}
.margin-t{
  margin-top: 0.5rem;
}
#step1{
  padding-top: 2rem;
}
#step6{
  padding-bottom: 1.8rem;
}
.bj-color{
    width: 100%;
    height: 0.4rem;
    background-color: #F6F6F6;
}
#margin-t{
  margin-top: 0.3rem;
}
.border-r{
  border-right: 0.06rem solid #f3f3f3;
}
.color-c{
  color: #cccccc;
}
#padding-tb1{
  padding: 0.5rem; 
}
#padding-tb2{
  padding: 0.5rem; 
}
.font-tags{
  font-size: 0.44rem;
}
.margin-l{
  margin-left: 0.3rem;
}
.tags-margin{
  margin: 0 0.1rem;
}
.img-radius{
  border-radius: 50%;
}
.yw-popup {
  width: 80%;
  text-align: center;
  border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
}
.van-cell {
  padding: 0.5rem 0.6rem;
}
.van-radio {
  float: right;
}
.step7 .desc p {
  padding: 0.2rem 0.6rem;
  line-height: 0.8rem;
}
.step7 .desc p:nth-child(2) {
  background: url('../../assets/image/order/icon_label@2x.png') no-repeat 0.6rem center;
  background-size: 0.62rem 0.62rem;
  padding-left: 1.2rem;
}
.optbtn span:nth-child(2) {
  min-width: 55%;
}
.optbtn span {
  padding: 0.4rem 0.6rem;
}
.optbtn span:nth-child(1) {
  min-width: 25%;
  text-align: center;
}
.opacity {
  position: absolute;
  width: 100%;
  z-index: 999;
  top: 20%;
  height: 4.1rem;
  background: url('../../assets/image/order/img_1@2x.png') no-repeat;
  background-size: cover;
}
.opacity .in {
  padding: 0.9rem 1rem;
}
.opacity .in,.step2 .in {
  background: url('../../assets/image/order/icon_arrow_gy@2x.png') no-repeat 93% center;
  background-size: 0.42rem 0.7rem;
}
.step2 .in {width: 0.42rem;height: 0.7rem;}
.opacity img {
  max-width: 2rem;
  max-height: 2rem;
  float: left;
  margin-right: 0.6rem;
}
.opacity .in p {
  line-height: 1rem;
}
.opacity .in p>span>em.sex2 {
  background: url('../../assets/image/index/img_female.png') no-repeat center center;
  background-size: 0.56rem 0.56rem;
  padding-left: 1.4rem;
  line-height: 1rem;
}
.opacity .in p>span>em.sex1 {
  background: url('../../assets/image/index/img_male.png') no-repeat center center;
  background-size: 0.56rem 0.56rem;
  padding-left: 1.4rem;
  line-height: 1rem;
}
.opacity .in p>span>em {
  line-height: initial;
  margin-left: 0.4rem;
}
.opacity p>span {
  display: flex;
}
.content .step3 span,.content .step5 span {
    width: 49%;
    /*display: inline-flex;*/
    display: block;
    text-align: center;
    float: left;
    line-height: 1rem;
}
.yw-order-detail .van-cell:nth-child(1) {
    background: url('../../assets/image/detail/icon_zfb@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;
}
.yw-order-detail .van-cell:nth-child(2) {
    background: url('../../assets/image/detail/icon_wx@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;
}
.yw-order-detail .van-cell:nth-child(3) {
    background: url('../../assets/image/detail/icon_balance@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;
}
.content .step3 span:nth-child(1),.content .step5 span:nth-child(1) {
  background: url('../../assets/image/order/icon_contact@2x.png') no-repeat 34% center;
  background-size: 0.72rem 0.62rem;
}
.content .step3 span:nth-child(2) {
  background: url('../../assets/image/order/icon_qq@2x.png') no-repeat 36% center;
  background-size: 0.68rem 0.72rem;
}
.content .step5 span:nth-child(2) {
  background: url('../../assets/image/order/icon_qq_act@2x.png') no-repeat 36% center;
  background-size: 0.68rem 0.72rem;
}
.content>div {
  background: #fff;
  margin-bottom: 0.4rem;
}
.content {
  background: #f5f5f5;
}
.content p {
  padding: 0.3rem 0.6rem
}
.content .step1 p:nth-child(1),.content .step3 p {
  padding: 1rem 0.6rem;
}
.content .step2 p:nth-child(4) {
  padding: 0.4rem 0.6rem;
  border-top: 0.02rem solid rgb(233, 231, 231);
}
.step1>p:nth-child(1) {
  border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.content .step2 span:nth-child(1) {
  margin-right: 0.5rem;
}
.statue {
    height: 3.6rem;
    padding: 0.6rem 1.6rem 0.6rem;
    color: #fff;
}
.statue p {
  line-height: 1.2rem;
}
.icon-return {
  background: 0;
  color: #fff;
}


</style>